import React, { useEffect, useRef, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'

export default function NotFound() {
  const [time, setTime] = useState(5)
  const timerId = useRef(time)
  const history = useHistory()

  useEffect(() => {
    let timer = setInterval(() => {
      setTime(timerId.current - 1)
      if (timerId.current <= 1) {
        clearInterval(timer)
        history.replace('/home')
      }
    }, 1000)
    console.log('time', time)
    console.log('timerId', timerId)
    console.log('timer', timer)
    return () => {
      clearInterval(timer)
    }
  }, [])

  useEffect(() => {
    timerId.current = time
    console.log('time1', time)
    console.log('timerId1', timerId)
  }, [time])
  return (
    <div className="root">
      <h4>你访问的页面不存在</h4>
      <Link to="/home">{time}秒后自动返回首页</Link>
    </div>
  )
}
